<template>
  <view class="page">
    <view class="top-background-raduis"></view>
    <view class="login-box">
      <view class="login-card-title">
        <view class="login-card-title-content">注册骑手</view>
      </view>
      <view class="login-card-input">
        <view class="sex-input">
          <view>性别</view>
          <view class="sex-input">
            <radio-group style="transform:scale(0.8)">
              <label class="radio">
                <radio color="#3cb79a" value="0" :checked="formRegister.sex === '0'"/>
                女</label>
              <label class="radio">
                <radio value="1" :checked="formRegister.sex === '1'"/>
                男</label>
            </radio-group>
          </view>
        </view>
        <!-- 输入框头部图标 -->
        <uni-easyinput class="hj-input" v-model="formRegister.name"
                       focus
                       maxlength="4"
                       :trim="true"
                       @focus="UserNamePassWrodFocusBorderStyle"
                       :styles="inputColorConfigToUserName"
                       @blur="UserNamePassWrodBlurBorderStyle"
                       placeholder="请输入姓名">
        </uni-easyinput>

        <!-- 输入框头部图标 -->
        <uni-easyinput class="hj-input" v-model="formRegister.username"
                       @focus="PassWordFocusBorderStyle"
                       @blur="PassWordBlurBorderStyle"
                       :styles="inputColorConfigToPassWord"
                       placeholder="请输入账号">
        </uni-easyinput>
        <!-- 输入框头部图标 -->
        <uni-easyinput class="hj-input" v-model="formRegister.password"
                       type="password"
                       @focus="PassWordFocusBorderStyle"
                       @blur="PassWordBlurBorderStyle"
                       :styles="inputColorConfigToPassWord"
                       placeholder="请输入密码">
        </uni-easyinput>
        <!-- 输入框头部图标 -->
        <uni-easyinput class="hj-input" v-model="formRegister.idNumber"
                       @focus="PassWordFocusBorderStyle"
                       @blur="PassWordBlurBorderStyle"
                       :styles="inputColorConfigToPassWord"
                       placeholder="请输入身份证">
        </uni-easyinput>     <!-- 输入框头部图标 -->
        <uni-easyinput class="hj-input" v-model="formRegister.phone"
                       @focus="PassWordFocusBorderStyle"
                       @blur="PassWordBlurBorderStyle"
                       :styles="inputColorConfigToPassWord"
                       placeholder="请输入手机号">
        </uni-easyinput>
      </view>

      <view class="login-card-loginIn">
        <button class="login-card-loginIn-btn" @click="register">
          提 交
        </button>
      </view>
      <view class="login-bottom-info">
        <view class="register" @click="toLogin">去登录</view>
      </view>
    </view>
    <view class="bottom-message">
      登录/注册代表你已同意《xxx使用协议》
    </view>
  </view>
</template>


<script>
//import {  } from "@/common/api/{$}.js";
import {getInfoApi, registerApi, registerEmApi} from "@/network/api";

export default {
  data() {
    return {
      // 输入框边框颜色默认值
      colorDefault: '#b4b4b4',
      // 输入框边框聚焦值
      colorFocusColor: '#3cb79a',
      // 输入框颜色配置
      inputColorConfigToUserName: {
        color: "#000000",
        disableColor: "#eee",
        borderColor: "#b4b4b4",
      },
      // 输入框颜色配置
      inputColorConfigToPassWord: {
        color: "#000000",
        disableColor: "#eee",
        borderColor: "#b4b4b4",
      },
      value: "",
      imgList: [],
      cloudimgList: [],
      imgCount: 1,//最多支持9张上传，可以修改
      formRegister: {
        name: "",
        sex: "0",
        password: "",
        username: "",
        balance: 0,
        idNumber: "",
        phone: "",
        status: 1,
      }
    };
  },
  //监听页面初始化，其参数同 onLoad 参数，为上个页面传递的数据，参数类型为 Object（用于页面传参），触发时机早于 onLoad
  onInit() {
  },
  //监听页面加载，其参数为上个页面传递的数据，参数类型为 Object（用于页面传参）
  onLoad() {
  },
  //监听页面初次渲染完成。注意如果渲染速度快，会在页面进入动画完成前触发
  onReady() {
  },
  //监听页面显示。页面每次出现在屏幕上都触发，包括从下级页面点返回露出当前页面
  beforeDestroy() {
  },
  //页面滚动到底部的事件（不是scroll-view滚到底），常用于下拉下一页数据。
  onReachBottom() {
  },
  onShareAppMessage() {
  },
  created() {
  },
  methods: {
    register() {
      console.log(this.formRegister)
      registerEmApi(this.formRegister).then(res => {
        uni.showToast({
          title: res.data,
          icon: 'none'
        });
        this.toLogin()
      }).catch(err => {
        console.log(err)
      })
    },
    toLogin() {
      uni.navigateTo({
        url: '../bgLogin/bgLogin'
      });
    },
    // 输入框聚焦变换边框样式
    UserNamePassWrodFocusBorderStyle() {
      this.inputColorConfigToUserName.borderColor = this.colorFocusColor;
    },
    PassWordFocusBorderStyle() {
      this.inputColorConfigToPassWord.borderColor = this.colorFocusColor;
    },
    // 输入框失去焦点变换边框样式
    UserNamePassWrodBlurBorderStyle() {
      this.inputColorConfigToUserName.borderColor = this.colorDefault;
    },
    PassWordBlurBorderStyle() {
      this.inputColorConfigToPassWord.borderColor = this.colorDefault;
    },
    submit(e) {
      this.submitData = null;
      const _this = this;
      if (this.imgList.length < 1) {
        uni.showToast({
          title: '请添加图片',
          icon: 'none'
        });
        return false;
      }
      uni.showLoading({
        title: '上传图片',
        mask: false
      });

      uni.uploadFile({
        url: "/api/common/upload",
        filePath: this.imgList[0].path,
        success: (res) => {
          //保存图片的路径
          _this.formRegister.avatar = JSON.parse(res.data).data;
          console.log(res.data)
          uni.hideLoading();
          uni.showToast({
            title: '上传成功！',
            icon: 'none'
          });
        },
        fail: (err) => {
          console.log(err);
        }

      })

    },
    imgInfo(i) {
      let tempList = [];
      this.imgList.forEach(img => {
        tempList.push(img.path);
      });
      console.log(tempList);
      //显示图片
      uni.previewImage({
        current: i,
        loop: false,
        urls: tempList,
        indicator: 'default'
      });
    },



  },
};
</script>
<style lang="scss" scoped>
* {
  box-sizing: border-box;
}

.page {
  position: relative;
  height: 100vh;
}

.top-background-raduis {
  height: 30%;
  background-color: #d8d8d8;
  border-bottom-left-radius: 50%;
  border-bottom-right-radius: 50%;
}

/deep/ .is-input-border {
  border-radius: 7px !important;
}

/deep/ .uni-easyinput__content {
  min-height: 39px !important;
}

.hj-input {
  margin-top: 15rpx;
}

.sex-input {
  display: flex;
  flex-direction: row;
  align-content: flex-end;
  justify-content: space-between;

  .radio {
    padding-right: 50rpx;
  }
}

//.hj-input:nth-child(2) {
//  margin-top: 35rpx;
//}
.hj-input:not(:first-child) {
  margin-top: 35rpx;
}

.login-box {
  top: 20%;
  position: absolute;
  width: 80%;
  left: 10%;
  right: 10%;
  padding: 30rpx;
  background-color: white;
  border-radius: 40rpx;
  box-shadow: 9px 9px 6px #e3e3e3;

  .login-card-input {
    // background-color: violet;
    height: 120%;
    padding: 5rpx;

    .page {
      width: 750rpx;
      overflow: hidden;
    }

    .back {
      font-size: 32rpx;
      font-weight: 500;
      line-height: 48rpx;
      color: rgba(153, 153, 153, 1);
    }

    .back-hover {
      opacity: 0.4;
    }

    .submit-box {
      position: fixed;
      bottom: 0;
      left: 0;
      display: flex;
      width: 750rpx;
      justify-content: center;
    }

    .submit-btn {
      margin-top: 10px;
      display: inline-block;
      width: 670rpx;
      height: 96rpx;
      line-height: 96rpx;
      text-align: center;
      background-color: rgba(109, 221, 203, 1);
      opacity: 1;
      border-radius: 32rpx;
      border-width: 8rpx;
      border-color: rgba(255, 255, 255, 1);
      box-shadow: 0rpx 8rpx 12rpx rgba(0, 0, 0, 0.16);
      border-radius: 56rpx;
      font-size: 39rpx;
      font-weight: bold;
      color: rgba(255, 255, 255, 1);
    }

    .submit-btn-txt {
      font-size: 39rpx;
      font-weight: bold;
      line-height: 47rpx;
      color: rgba(255, 255, 255, 1);
      opacity: 1;
    }

    .map-box {
      width: 484rpx;
      height: 256rpx;
      border-width: 4rpx;
      border-color: rgba(255, 255, 255, 1);
      box-shadow: 0rpx 0rpx 24rpx rgba(0, 0, 0, 0.16);
      /* border-radius: 12rpx; */
      position: relative;
    }

    .map {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      width: 476rpx;
      height: 250rpx;
    }

    .map-img {
      position: absolute;
      top: 90rpx;
      left: 156rpx;
      width: 230rpx;
      height: 68rpx;
      background-color: rgba(51, 51, 51, 0.64);
      border-width: 1rpx;
      border-color: rgba(0, 0, 0, 0);
      border-radius: 34px;

      font-size: 28rpx;
      font-weight: bold;
      line-height: 66rpx;
      color: rgba(255, 255, 255, 1);
      text-align: center;
    }

    .address-box {
      display: flex;
      width: 670rpx;
      flex-direction: row;
      align-items: center;
      justify-content: space-between;
      padding: 15rpx 40rpx;
      margin-bottom: 10px;
    }

    .label {
      font-size: 36rpx;
      font-weight: bold;
      line-height: 50rpx;
      color: #222222;
    }

    .label-img {
      padding-left: 40rpx;
    }

    .address-box-txt {
      align-items: flex-start;
    }

    .address-txt {
      width: 484rpx;
      height: 90rpx;
      font-size: 32rpx;
      font-weight: 500;
      line-height: 45rpx;
      color: rgba(51, 51, 51, 1);
    }

    .add-box {
      padding: 15rpx 0;
      flex-wrap: wrap;
    }

    .add-img-box {
      display: flex;
      width: 100%;
      //padding: 0 40rpx;
      padding-left: 10rpx;
      flex-direction: row;
      flex-wrap: wrap;
      justify-content: center;
      padding-top: 20rpx;
      padding-bottom: 20rpx;
    }

    .add-img-item {
      /* width:210rpx;
        height:210rpx; */
      width: 200rpx;
      height: 200rpx;
      border-radius: 24rpx;
      position: relative;
      padding: 9rpx 0;
      margin-left: 20rpx;
    }

    .add-img-camera {
      flex: 1;
    }

    .add-img {
      width: 200rpx;
      height: 200rpx;
      border-radius: 24rpx;
    }

    .add-img-del {
      position: absolute;
      width: 40rpx;
      height: 40rpx;
      right: 8rpx;
      top: 17rpx;
      //background-color: rgba(238, 0, 0, 1);
      border-radius: 20rpx;
    }

    .address-time {
      width: 484rpx;
      height: 88rpx;
      background-color: rgba(245, 245, 245, 1);
      opacity: 1;
      border-radius: 24rpx;
      text-align: center;

      font-size: 35rpx;
      font-weight: 500;
      color: rgba(51, 51, 51, 1);
    }

    .line {
      width: 750rpx;
      height: 1px;
      transform: scaleY(0.3);
      background-color: rgba(0, 0, 0, 0.5);
    }
  }

  .login-card-title {
    height: 20%;
    // background-color: black;
    padding: 10rpx;
    display: flex;
    justify-content: center;

    .login-card-title-content {
      font-size: 1.2em;
      color: #3cb79a;
      border-bottom: 3px solid #3cb79a;
    }
  }

  .login-card-loginIn {
    height: 25%;
    display: flex;
    justify-content: center;
    padding: 60rpx 10rpx 10rpx;
    align-items: center;

    .login-card-loginIn-btn {
      display: flex;
      align-items: center;
      justify-content: center;
      background-color: #3cb79a;
      width: 100%;
      font-size: 1.2em;
      height: 80%;
      border-radius: 40rpx;
      color: white;
    }
  }

  .login-bottom-info {
    height: 5%;
    display: flex;
    font-size: 0.7em;
    color: #3cb79a;
    justify-content: space-between;

    .register {
    }
  }
}

.bottom-message {
  position: absolute;
  height: 70rpx;
  display: flex;
  width: 100%;
  justify-content: center;
  align-items: center;
  font-size: 0.9em;
  overflow: hidden;
  color: #969898;
  bottom: 40rpx;
}
</style>